<template>
	<view class="content">
		<view class="info_row">
			<view style="flex: none">头像</view>
			<view class="info_col">
				<button class="avatar-view" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image class="avatar-image" :src="userInfo.avatar" v-if="userInfo.avatar" />
					<image v-else class="avatar-image" :src="base.JavaimgUrl + 'default_logo.png'" />
				</button>
				<dx-icons type="right" size="32rpx" color="#999" />
			</view>
		</view>
		<view class="info_row" @click="handleNickName">
			<view style="flex: none">昵称</view>
			<view class="info_col">
				<text v-if="userInfo.name" class="overhiden">{{ userInfo.name }}</text>
				<text v-else style="color: #bbb">输入你的昵称</text>
				<dx-icons type="right" size="32rpx" color="#999" />
			</view>
		</view>
		<view class="info_row" @click="handleOpen">
			<view style="flex: none">所在城市</view>
			<view class="info_col">
				<text v-if="addressName" class="overhiden">{{ addressName }}</text>
				<text v-else style="color: #bbb">请选择所在城市</text>
				<dx-icons type="right" size="32rpx" color="#999" />
			</view>
		</view>
		<view class="info_row">
			<view style="flex: none;">绑定手机</view>
			<view class="info_col">
				<text class="overhiden">{{ userInfo.mobile }}</text>
			</view>
		</view>
		<view class="info_row" @click="handleIntroduce">
			<view style="flex: none;">个人简介</view>
			<view class="info_col">
				<text v-if="userInfo.introduce" class="overhiden">{{ userInfo.introduce }}</text>
				<text v-else style="color: #bbb;">点击填写个人介绍</text>
				<uv-icon name="arrow-right" size="32rpx" color="#999"></uv-icon>
			</view>
		</view>
		<!-- <view class="info_row" style="margin-top: 24rpx;" @click="handleTel">
			<view style="flex: none;">联系电话</view>
			<view class="info_col">
				<text v-if="userInfo.contact_mobile" class="overhiden">{{ userInfo.contact_mobile }}</text>
				<text v-else style="color: #bbb;">点击填写联系电话</text>
				<uni-icons type="right" size="32rpx" color="#999" />
			</view>
		</view>
		<view class="info_row" @click="handleWeixin">
			<view style="flex: none;">联系微信</view>
			<view class="info_col">
				<text v-if="userInfo.contact_wechat" class="overhiden">{{ userInfo.contact_wechat }}</text>
				<text v-else style="color: #bbb;">点击填写联系微信</text>
				<uni-icons type="right" size="32rpx" color="#999" />
			</view>
		</view> -->
		<view class="info_row" @click="handleAuthorize">
			<view style="flex: none;">订单通知授权</view>
			<view class="info_col">
				<text style="color: #bbb;">{{ userInfo.open_id ? '已授权' : '未授权' }}</text>
				<uv-icon name="arrow-right" size="32rpx" color="#999"></uv-icon>
			</view>
		</view>
		<view class="info_row" style="margin-top: 24rpx;" @click="handleAbout">
			<view style="flex: none;">关于我们</view>
			<view class="info_col">
				<uv-icon name="arrow-right" size="32rpx" color="#999"></uv-icon>
			</view>
		</view>
		<view class="logout">
			<view @click="handleOut" class="logout-btn">退出当前帐号</view>
		</view>
	</view>
	<uv-picker ref="picker" :columns="addressList" :loading="loading" keyName="name" @change="AddressChange"
		@confirm="Addressconfirm"></uv-picker>
</template>

<script setup>
import base from '@/common/baseURL.js';
import api from '@/common/api.js';
import { computed, ref } from 'vue';
import { useUserinfoStore } from '@/stores/userInfo';
import { onShow, onLoad } from '@dcloudio/uni-app';
const userInfo_Store = useUserinfoStore();
const userInfo = ref({});
//选择头像保存
const onChooseavatar = (e) => {
	uni.showLoading({
		title: '上传中...'
	});
	uni.uploadFile({
		url: `${base.basePHPURL + base.PhpUrl}/Upload/chatimg`,
		filePath: e.detail.avatarUrl,
		name: 'file',
		formData: {
			token: uni.getStorageSync('accessToken')
		},
		success: (res) => {
			const respData = JSON.parse(res.data);
			uni.hideLoading();
			if (respData.code === 10067) {
				api.GetHeaderImg_API({ headimg: respData.data.pic_path }).then((res) => {
					if (res.code === 0) {
						userInfo.value.avatar = respData.data.pic_path;
						// userInfo_Store.GetUserInfo()
					}
				});
			} else {
				userInfo.value.avatar = '';
				uni.showToast({
					title: '图片上传失败，请重新上传',
					icon: 'none',
					duration: 2000
				});
			}
		},
		fail: (error) => { }
	});
};
// 昵称设置
const handleNickName = () => {
	uni.navigateTo({
		url: `../nickname_set/nickname_set?key=${userInfo.value.name || ''}`
	});
};
const picker = ref();
const handleOpen = () => {
	picker.value.open();
};
onShow(() => {
	userInfo.value = userInfo_Store.userInfo;
});
onLoad(() => {
	GetAddressList();
});
const loading = ref(false);
const provinces = ref(); //省
const citys = ref(); //市
const areas = ref(); //区
//回显地址计算
const addressName = computed(() => {
	const {
		province_name,
		city_name,
		area_name
	} = userInfo.value
	let arr = []
	province_name && arr.push(province_name)
	city_name && arr.push(city_name)
	area_name && arr.push(area_name)
	return arr.join(('-'))
});
let pickerValue = [0, 0, 0]
let defaultValue = [110000, 110100, 110101]
const addressList = computed(() => [provinces.value, citys.value, areas.value])
const GetAddressList = async () => {
	loading.value = true;
	const res = await api.Getaddress_API();
	if (res.code === 0) {
		provinces.value = addresskeyFn(res.data)
		handlePickValueDefault()
	}
	loading.value = false;
};

const addresskeyFn = (el, key) => {
	const result = []
	el.forEach((el) => {
		const l = {
			children: [],
			code: el.id,
			id: el.id,
			name: el.name,
			parentId: el.pid,
			latitude: el.latitude,
			level: el.level,
			longitude: el.longitude,
			shortname: el.shortname,
			sort: el.sort,
			status: el.status
		};
		result.push(l)
		if (el.city_list || el.area_list) {
			l.children = addresskeyFn(el.city_list || el.area_list);
		}
	});
	return result
};
const handlePickValueDefault = () => {
	// 设置省
	pickerValue[0] = provinces.value.findIndex(item => Number(item.id) === defaultValue[0]);

	// 设置市
	citys.value = provinces.value[pickerValue[0]]?.children || [];
	pickerValue[1] = citys.value.findIndex(item => Number(item.id) === defaultValue[1]);
	// 设置区
	areas.value = citys.value[pickerValue[1]]?.children || [];
	pickerValue[2] = areas.value.findIndex(item => Number(item.id) === defaultValue[2]);
	// 重置下位置
	picker.value.setIndexs([pickerValue[0], pickerValue[1], pickerValue[2]], true);
}
const Addressconfirm = async (e) => {
	const res = e.value
	const params = {
		province_code: res[0].code,
		city_code: res[1].code,
		area_code: res[2].code,
		province_name: res[0].name,
		city_name: res[1].name,
		area_name: res[2].name,
	}
	userInfo.value = { ...userInfo.value, ...params }
	await api.UpdateAddress_API(params)
};
const AddressChange = (e) => {
	if (loading.value) return;
	const { columnIndex, index, indexs } = e
	// 改变了省
	if (columnIndex === 0) {
		citys.value = provinces.value[index]?.children || []
		areas.value = citys.value[0]?.children || []
		picker.value.setIndexs([index, 0, 0], true)
	} else if (columnIndex === 1) {
		areas.value = citys.value[index]?.children || []
		picker.value.setIndexs(indexs, true)
	}
}
// 个人简介设置
const handleIntroduce = () => {
	uni.navigateTo({
		url: `../profiles_set/profiles_set?key=${userInfo.value.introduce || ''}`
	})
}
// 联系电话设置
const handleTel = () => {
	uni.navigateTo({
		url: `../phone_set/phone_set?key=${userInfo.value.contact_mobile || ''}`
	})
}
// 联系微信设置
const handleWeixin = () => {
	uni.navigateTo({
		url: `../weixin_set/weixin_set?key=${userInfo.value.contact_wechat || ''}`
	})
}
const handleAuthorize = () => {
	uni.setStorageSync('isAuto', false)
	uni.$on('tencent_isux', async (data) => {
		const res = await userInfo_Store.GetUserInfo();
		userInfo.value = res
		if (data && res.open_id) {
			uni.showToast({
				title: '授权成功',
				icon: 'none'
			})
		}
		uni.$off('tencent_isux')
	})
	if (userInfo.value.open_id) {
		uni.showToast({
			title: '已授权，无法重复授仅',
			icon: 'none'
		})
		return false
	}
	uni.navigateTo({
		url: '../tencent_isux/tencent_isux'
	})
}
// 关于我们
const handleAbout = (url) => {
	uni.navigateTo({
		url: '../about/about'
	})
}
// 退出当前帐号
const handleOut = () => {
	uni.navigateTo({
		url: '../setting/setting'
	})
}
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	font-size: 26rpx;
	padding-top: 24rpx;
	padding-bottom: 144rpx;
	min-height: 100vh;
}

.info_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #999;
	background-color: #ffffff;
	padding: 28rpx 24rpx;
	border-bottom: 2rpx solid #eee;
}

.info_col {
	display: flex;
	align-items: center;
}

.avatar-view {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.1rpx;
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	padding: 0;
	border: 2rpx solid #eee;
}

.avatar-image {
	width: 96rpx;
	height: 96rpx;
}

button::after {
	border: 0;
}

.logout {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.logout-btn {
	width: 100%;
	height: 68rpx;
	text-align: center;
	line-height: 68rpx;
	background: rgba(170, 170, 170, 0.3);
	border-radius: 16rpx;
	font-size: 30rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	color: #aaaaaa;
}

.overhiden {
	white-space: pre-wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	padding-left: 24rpx;
	box-sizing: border-box;
	color: #333;
}
</style>
